<template>
  <div class="youth-voice-page">
    <!-- 导航按钮（与di5.vue样式一致） -->
    <navigator url="/pages/index/shou_ye/di7" class="nav-button">
      青春留声>>
    </navigator>

    <!-- 背景图区域 -->
    <div class="banner">
      <img src="/static/tp/L2.png" alt="青春留声背景" class="bg-img" />
    </div>

    <!-- 视频模块 -->
    <div class="video-section">
      <h3 class="section-header">定格成电记忆</h3>
      <div class="video-wrapper">
        <video
            class="adaptive-video"
            controls
            preload="metadata"
            poster="/static/tp/L2.png"
        >
          <source src="/static/tp/L3.mp4" type="video/mp4">
        </video>
      </div>
    </div>

    <!-- 留言板模块 -->
    <div class="message-board-section">
      <h3 class="section-header">毕业留言板</h3>
      <textarea
          class="message-textarea"
          v-model="message"
          placeholder="请输入您对母校的寄语或个人对未来的展望 支持emoji..."
          maxlength="1000"
          @input="updateCharCount"
      ></textarea>
      <p class="char-count">{{ charCount }}/1000</p>
      <button class="submit-btn" @click="submitMessage">提交留言</button>
    </div>

    <!-- 底部技术支持 -->
    <div class="footer">
      电子科技大学
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 留言板响应式数据
const message = ref('');
const charCount = ref(0);

// 更新字符计数
const updateCharCount = () => {
  charCount.value = message.value.length;
};

// 提交留言逻辑
const submitMessage = () => {
  if (message.value.trim() === '') {
    alert('请输入留言内容');
    return;
  }
  console.log('提交的留言：', message.value);
  alert('留言提交成功！');
  message.value = '';
  charCount.value = 0;
};
</script>

<style scoped>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft Yahei', sans-serif;
}

.youth-voice-page {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  position: relative; /* 新增：为按钮绝对定位提供基准 */
}

/* 导航按钮样式（与di5.vue完全一致） */
.nav-button {
  width: 200rpx;
  height: 80rpx;
  background-color: #043cf3;
  color: white;
  text-align: center;
  line-height: 80rpx;
  border-radius: 40rpx;
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  font-size: 32rpx;
  text-decoration: none;
  z-index: 10; /* 确保按钮在其他内容上方 */
}

/* 背景图区域 */
.banner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 30%;
  overflow: hidden;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 视频模块 */
.video-section {
  width: 90%;
  margin: 20px auto;
}

.section-header {
  background-color: #4caf50;
  color: #fff;
  padding: 8px 15px;
  border-radius: 4px;
  display: inline-block;
  font-size: 16px;
  margin-bottom: 15px;
}

.video-wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.adaptive-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 留言板模块 */
.message-board-section {
  width: 90%;
  margin: 0 auto 30px;
}

.message-textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical;
  font-size: 14px;
  transition: border-color 0.3s;
}

.message-textarea:focus {
  outline: none;
  border-color: #4caf50;
}

.char-count {
  text-align: right;
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.submit-btn {
  background-color: #4caf50;
  color: #fff;
  border: none;
  padding: 10px 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #45a049;
}

/* 底部 */
.footer {
  text-align: center;
  padding: 15px;
  background-color: #4caf50;
  color: #fff;
  font-size: 14px;
  width: 100%;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .banner {
    padding-bottom: 40%;
  }
  .video-section, .message-board-section {
    width: 95%;
  }
}
</style>